<template>
  <div class="analysis">
    <div class="user-card">
      <div class="user-left">
        <img src="/src/assets/testing_images/jiaoshi-0.png" alt/>
      </div>
      <div class="user-middle">
        <div class="middle-title">
          <i class="el-icon-user"/>
          <span>{{ userInfo.name }}</span>
        </div>
        <div class="user-phone">{{ userInfo.verifiedMobile }}</div>
        <div class="user-vip">
          <div class="vip-hint-box">
            <span>会员等级：</span>
            <span>{{ userInfo.levelName }}</span>
          </div>
        </div>
      </div>
    </div>
    <el-tabs v-model="activeName">
      <el-tab-pane name="1" label="用户资料">
        <el-form
          ref="userInfoForm"
          :model="userInfo"
          label-width="120px"
        >
          <div class="class-nav">
            <div class="class-title">基本信息</div>
          </div>
          <el-row style="margin-top:20px;">
            <el-col :span="12">
              <el-form-item label="姓名：">
                <el-input v-model="userInfo.name" style="width:200px;"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用户名：">
                <el-input v-model="userInfo.nickName" style="width:200px;"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="身份证号：">
                <el-input v-model="userInfo.idCard" style="width:200px;"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别">
                <el-radio-group v-model="userInfo.gender">
                  <el-radio label="1">男</el-radio>
                  <el-radio label="0">女</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="年龄：">
                <el-input v-model="userInfo.age" style="width:200px;"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="家庭住址：">
                <el-input v-model="userInfo.address" style="width:200px;"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="出生日期：">
                <el-date-picker
                  v-model="userInfo.birthday"
                  placeholder="选择日期"
                  style="width:200px;"
                  type="date"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="会员等级">
                <el-select v-model="userInfo.levelName" placeholder="请选择">
                  <el-option
                    v-for="item in userLevelList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="class-nav">
            <div class="class-title">联系方式</div>
          </div>
          <el-row style="margin-top:20px;">
            <el-col :span="12">
              <el-form-item label="QQ：">
                <el-input v-model="userInfo.qq" style="width:200px;"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="微信：">
                <el-input v-model="userInfo.weixin" style="width:200px;"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="手机号：">
                <el-input v-model="userInfo.verifiedMobile" style="width:200px;"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮箱：">
                <el-input v-model="userInfo.email" style="width:200px;"/>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="class-nav">
            <div class="class-title">账户信息</div>
          </div>
          <el-row style="margin-top:20px;">
            <el-col :span="12">
              <el-form-item label="账号：">
                <el-input v-model="userInfo.account" style="width:200px;"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="密码：">
                <el-input v-model="userInfo.password" style="width:200px;"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="积分：">
                <el-input v-model="userInfo.point" style="width:200px;"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邀请码：">
                <el-input v-model="userInfo.inviteCode" style="width:200px;"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane name="2" label="消费记录">
        <el-table
          :table-label="tableLabel"
          :table-data="eduxcloudOrdersList.slice((currentpage-1)*pagesize,currentpage*pagesize)"
          :header-cell-style="{background:'#eef1f6'}"
          border
          style="width: 100%"
        >
        </el-table>
        <pagination
          :total="total"
          :current-page="currentpage"
          :page-size="pagesize"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import ElTable from '@/components/Eltable'
  import {scrollTo} from '@/utils/scrollTo' // 上下滑动组件
  import Pagination from '@/components/Pagination' // 分页组件
  import {getEduxcloudUserById, userLevelList} from '@/api/user/user'
  import {getTenantId} from '@/utils/auth'

  export default {
    components: {
      ElTable,
      Pagination
    },
    data() {
      return {
        activeName: '1',
        userInfo: {},
        total: 0,
        currentpage: 1,
        pagesize: 10,
        tableLabel: [
          {
            label: '编号', width: '3', prop: 'sn'
          }, {
            label: '订单主题', width: '2', prop: 'title', isOpera: true
          }, {
            label: '消费金额', width: '2', prop: 'amount', isOpera: true
          }, {
            label: '消费日期', width: '1', prop: 'createTimeTimeStr'
          }, {
            label: '支付方式', width: '1', prop: 'payment'
          }
        ],
        eduxcloudOrdersList: [],
        userLevelList: [],
      }
    },
    created() {
      this.routerId = this.$route.params.userId;
      if (this.routerId) {
        this.getEduxcloudUserById(this.routerId);
      }
      this.getUserLevelList();
    },
    methods: {
      getEduxcloudUserById(id) {
        getEduxcloudUserById(id).then(response => {
          this.userInfo = response.data.eduxcloudUser;
          this.eduxcloudOrdersList = response.data.eduxcloudOrdersList;
          this.eduxcloudOrdersList.map(item => {
            if (item.payment === 'alipay') item.payment = '支付宝';
            if (item.payment === '支付宝') item.payment = '支付宝';
            if (item.payment === 'wx') item.payment = '微信';
            if (!item.payment) item.payment = '其他支付';
          });
          this.total = response.data.eduxcloudOrdersList.length;
        })
      },
      getUserLevelList() {
        userLevelList(getTenantId()).then(response => {
          this.userLevelList = response.data.items
        })
      },
      handleSizeChange(val) {
        this.currentpage = 1;
        this.pagesize = val.value;
        if (this.pagesize >= 20) {
          scrollTo(50, 800)
        }
      },
      handleCurrentChange(val) {
        this.currentpage = val.value;
        if (this.pagesize >= 20) {
          scrollTo(50, 800)
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .analysis {
    padding: 10px 20px 40px;

    .user-card {
      border: 1px solid #eee;
      box-shadow: 0 0 10px #bbbbbb;
      padding: 20px;
      display: flex;
      box-sizing: border-box;

      .user-left {
        img {
          width: 130px;
          height: 130px;
          margin-right: 20px;
        }
      }

      .user-middle {
        color: #666;
        padding: 20px 0;

        .middle-title {
          font-size: 18px;
          color: #353535;
        }

        .user-phone {
          margin: 20px 0;
        }

        .user-vip {
          display: flex;

          .vip-hint-box {
            margin-right: 30px;
          }
        }
      }

      .user-right {
        margin-left: auto;

        .user-btn {
          width: 110px;
          margin: 5px 0;
        }
      }
    }

    .class-nav {
      position: relative;
      padding: 10px;
      width: 100%;
      min-height: 40px;
      background-color: #f8f8f8;

      .class-title {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        padding-left: 7px;
        font-size: 16px;
        color: #353535;
        line-height: 20px;
      }

      .class-title::before {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        margin-right: 5px;
        content: '';
        display: inline-block;
        height: 14px;
        width: 2px;
        background-color: #2a75ed;
      }
    }
  }
</style>
